import React from 'react';
import { Class } from '../../../shared/models';
import { useData } from '../../../shared/DataContext';
interface ClassTableProps {
  classes: Class[];
  onViewDetail: (cls: Class) => void;
  onEdit: (cls: Class) => void;
  onDelete: (cls: Class) => void;
}

const ClassTable: React.FC<ClassTableProps> = ({ classes, onViewDetail, onEdit, onDelete }) => {
  // 不需要过滤任何学院的班级，显示所有班级
  const filteredClasses = classes;
  // 从数据上下文获取学生数据和选项数据
  const { students, stageOptions, academyOptions } = useData();
  
  // 根据班级名称获取阶层和阶段信息
  const getClassInfo = (className: string) => {
    const classInfoMap: { [key: string]: { tier: string, stage: string } } = {
      '2509A': { tier: '专业', stage: '专业一' },
      '2508A': { tier: '专业', stage: '专业二' },
      '2508B': { tier: '专业', stage: '专业二' },
      '2507A': { tier: '专业', stage: '专业三' },
      '2507B': { tier: '专业', stage: '专业三' },
      '2506A': { tier: '专业', stage: '专业四' },
      '2505A': { tier: '专业', stage: '专业五' },
      '2504A': { tier: '专高', stage: '专高一' },
      '2503A': { tier: '专高', stage: '专高二' },
      '2502A': { tier: '专高', stage: '专高三' },
      '2502C': { tier: '专高', stage: '专高三' },
      '2501A': { tier: '专高', stage: '专高四' },
      '2412A': { tier: '专高', stage: '专高五' },
      '2412C': { tier: '专高', stage: '专高五' },
      '2411A': { tier: '专高', stage: '专高六' },
      '2411B': { tier: '专高', stage: '专高六' },
      '2411C': { tier: '专高', stage: '专高六' },
      '2410A': { tier: '实训', stage: '实训一' },
      '2410B': { tier: '实训', stage: '实训一' },
      '2410C': { tier: '实训', stage: '实训一' },
      '2410D': { tier: '实训', stage: '实训一' },
      '2409A': { tier: '实训', stage: '实训二' },
      '2409B': { tier: '实训', stage: '实训二' },
      '2409C': { tier: '实训', stage: '实训二' },
      '2408A': { tier: '实训', stage: '实训三' },
      '2408B': { tier: '实训', stage: '实训三' }
    };
    return classInfoMap[className] || { tier: '未知', stage: '未知' };
  };
  
  // 获取阶段标签
  const getStageLabel = (value: string) => {
    const stageOption = stageOptions.find(option => option.value === value);
    return stageOption?.label || value;
  };
  
  // 获取学院标签
  const getAcademyLabel = (value: string) => {
    const academyOption = academyOptions.find(option => option.value === value);
    return academyOption?.label || value;
  };

  // 获取状态标签
  const getStatusLabel = (value: string) => {
    const statusMap: Record<string, string> = {
      'active': '在读',
      'graduated': '毕业',
      'disbanded': '已解散',
      'preparing': '筹备中'
    };
    return statusMap[value] || value;
  };

  // 获取状态样式
  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'active':
        return { color: '#52c41a', backgroundColor: '#f6ffed' };
      case 'graduated':
        return { color: '#1890ff', backgroundColor: '#e6f7ff' };
      case 'disbanded':
        return { color: '#ff4d4f', backgroundColor: '#fff2f0' };
      case 'preparing':
        return { color: '#faad14', backgroundColor: '#fffbe6' };
      default:
        return { color: '#666', backgroundColor: '#f5f5f5' };
    }
  };

  // 计算班级学生人数
  const getStudentCount = (classId: string) => {
    return students.filter(student => student.classId === classId && student.status === 'active').length;
  };

  return (
    <table className="class-table">
      <thead>
        <tr>
          <th>班级编号</th>
          <th>班级名称</th>
          <th>阶层</th>
          <th>阶段</th>
          <th>学院</th>
          <th>导员</th>
          <th>讲师</th>
          <th>学生人数</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {filteredClasses.length === 0 ? (
          <tr>
            <td colSpan={11} style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
              暂无班级数据
            </td>
          </tr>
        ) : (
          filteredClasses.map(cls => (
            <tr key={cls.id}>
                <td>{cls.id}</td>
                <td>{cls.name}</td>
                <td>{getClassInfo(cls.name).tier}</td>
                <td>{getClassInfo(cls.name).stage}</td>
                <td>{getAcademyLabel(cls.academy)}</td>
                <td>{cls.advisorName}</td>
                <td>{cls.lecturerName}</td>
                <td>{getStudentCount(cls.id)}</td>
              <td>
                <span
                  style={{
                    ...getStatusStyle(cls.status),
                    padding: '4px 8px',
                    borderRadius: '4px',
                    fontSize: '12px',
                    display: 'inline-block'
                  }}
                >
                  {getStatusLabel(cls.status)}
                </span>
              </td>
              <td>{cls.createdAt}</td>
              <td>
                <div className="action-buttons">
                  <button className="view-btn" onClick={() => onViewDetail(cls)}>
                    查看
                  </button>
                  <button className="edit-btn" onClick={() => onEdit(cls)}>
                    编辑
                  </button>
                  <button className="delete-btn" onClick={() => onDelete(cls)}>
                    删除
                  </button>
                </div>
              </td>
            </tr>
          ))
        )}
      </tbody>
    </table>
  );
};

export default ClassTable;